<!--
- Author:  LiShibin.
- Date:    2018/8/30.
- File:    transactionDetail.
-->
<template>
  <div>
    <div style="margin-bottom: 120px">
      <div class="transactiondetail">
        <p>卖方用户：{{data.seller_name}}</p>
        <p>类型：<span v-show="data.style == 1">云宝</span><span v-show="data.style == 2">云通证</span><span v-show="data.style == 3">云积分</span></p>
        <p>数量：{{data.balance_num}}</p>
        <p>单价：{{data.balance_price}}</p>
        <p>总额：{{data.amount}}</p>
        <p>卖方联系电话：<span>{{data.mobile}}</span></p>
        <p>交易id: {{data.id}}</p>
      </div>
      <div class="tispop">*购买后云宝将锁仓1小时,请买家在当日18:00之前完成支付<p>*否则平台将对违约买家处以订单总额10%的罚款</p></div>
      <div>
        <button type="button" class="but_1 wauto" @click="bookingTransaction" v-show="data.seller_id != memberInfo.member_id && data.state == 10">确认购买</button>
        <button type="button" class="but_1 wauto" @click="finishedTransaction" v-show="data.seller_id == memberInfo.member_id && data.state == 20">确认收款</button>
      </div>
      <div class="transactiondetail">
        <p v-show="data.pay_style == 1">支付宝账号：{{dataInfo.account}}</p>
        <p v-show="data.pay_style == 2">微信账号：{{dataInfo.account}}</p>
        <p v-show="data.pay_style == 3 && data.member_turename != 0">真实姓名：{{dataInfo.account}}</p>
        <p v-show="dataInfo.bank_name && data.member_turename != 0">银行：{{dataInfo.bank_name}}</p>
        <p v-show="dataInfo.bank && data.member_turename != 0">开户行：{{dataInfo.bank}}</p>
        <p v-show="dataInfo.bank_id && data.member_turename != 0">银行卡号：{{dataInfo.bank_id}}</p>
        <p v-show="data.member_turename!='0'">买方用户：{{data.member_turename}}</p>
        <p v-show="data.member_mobile!='0'">买方联系电话：{{data.member_mobile}}</p>
        <p v-show="data.state==10 && data.member_turename != 0">交易状态：出售中</p>
        <p v-show="data.state==20 && data.member_turename != 0">交易状态：待付款</p>
        <p v-show="data.state==40 && data.member_turename != 0">交易状态：交易完成</p>
        <p v-show="data.state==50 && data.member_turename != 0">交易状态：已撤销</p>
      </div>
      <div>
        <!-- 图片上传 -->
        <!--<div style="left: 10px; top: 650px; position: absolute;">图片上传预览</div>-->
        <div v-show="images=='' && !data.exchange_img && data.member_turename == memberInfo.member_truename">
          <image-upload
            class="but_1 wauto"
            ref='ImageUpload'
            :url='url'
            :touch-size = 1
            :multiple = false
            :lrz-options = {width:1024}
            field-name = 'serverImgFile'
            :data = {}
            :max-count = 1
            @chooseImages='bindtap_chooseImages'
            style="tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:rgba(0,0,0,0);opacity: 0; z-index: 999"
          />
          <div style="z-index: -999; position: relative;top: -50px;" class="but_1 wauto">支付凭证上传</div>
        </div>

        <div @click="bindtap_upload" class="but_1 wauto" v-show="images!='' && !data.exchange_img && data.member_turename == memberInfo.member_truename">确认上传</div>
        <img width="100%" :src="imageUrl" alt="" v-show="data.exchange_img">
        <img width="100%" :src="image.src" alt="" v-for="(image , i) in images" @click="bingtap_preview(i)" v-show="images!=''">
        <!-- 图片预览 -->
        <image-preview
          style="z-index:200"
          :images="preImages"
          v-model="index"
          :numIsShow="false"
          :deleteIsShow="false"
          @delete="bindtap_delete"
        />
      </div>

    </div>

    <back-nav></back-nav>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import {ImageUpload, ImagePreview} from 'vue-image-upload-preview'

  export default {
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({need: ['memberInfo']})
    ],
    data() {
      return {
        id: this.$route.params.id,
        data: [],
        dataInfo: [],
        index: -1,
        images: [],
        url: 'http://hyplus.mtveve.com/mobile/index.php?act=goods&op=transaction_trade&order_id=' + this.$route.params.id,
        image1: [],
        dataImage: {id: this.$route.params.id},
        imageUrl: ''
      }
    },
    components: {
      'image-preview': ImagePreview,
      'image-upload': ImageUpload
    },
    created() {
      this.transactionInfo()
    },
    computed: {
      preImages() {
        return this.images.map(v => { return v.src })
      }
    },
    methods: {
      transactionInfo() {
        this.$request.transactionInfo(this.id).then(data => {
          this.data = data
          this.dataInfo = this.data.pay_info
          this.imageUrl = 'http://hyplus.mtveve.com/data/upload/image/' + this.data.exchange_img
          console.log(this.imageUrl)
        }).catch(e => {
          this.$toast('获取详情失败:' + e)
        })
      },
      bookingTransaction() {
        this.$messageBox.confirm(`请下单后一小时之内联系卖家支付，否则要罚款违约金`).then(action => {
          this.$request.bookingTransaction(this.id).then(data => {
            this.$toast('购买成功')
            this.$router.push({name: 'transfer-transaction'})
          }).catch(e => {
            this.$toast('购买失败:' + e.msg)
            this.$router.push({name: 'transfer-transaction'})
          })
        }).catch(() => {
        })
      },
      finishedTransaction() {
        this.$messageBox.confirm(`你确定要确认这笔交易吗?`).then(action => {
          this.$request.finishedTransaction(this.id).then(data => {
            this.$toast('确认交易')
            this.$router.push({name: 'transfer-transaction'})
          }).catch(e => {
            this.$toast('确认交易失败:' + e.msg)
            this.$router.push({name: 'transfer-transaction'})
          })
        }).catch(() => {
        })
      },
      bindtap_chooseImages(e) {
        /*
         * 选择成功 e是一个数组
         * e[0].file 图片文件对象，用于上传
         * e[0].src 图片base64，用于预览
         * e[0].compress 图片是否经过压缩
         */
        this.bindtap_delete()
        if (Array.isArray(e)) {
          this.images = this.images.concat(e)
          console.log(this.images.map(v => { return v.src }))
        } else {
          console.log(e)
        }
      },
      bindtap_delete(e) {
        /*
         * e 当前显示的图片的下标(双向绑定index，可以忽略e)
         * this.images 存储选择图片传过来的对象
         * this.index 双向绑定当前显示的图片的下标
         * 下面是删除的例子
         */
        this.images = this.images.filter((v, i) => {
          return this.index != i
        })
      },
      /**
       *  绑定函数 -- 预览图片
       */
      bingtap_preview(i) {
        this.index = i
      },
      /**
       *  绑定函数 -- 取消预览
       */
      bingtap_hiddenImg() {
        this.index = -1
      },
      bindtap_upload() {
        this.$messageBox.confirm(`你确定要上传这张支付凭证吗?`).then(action => {
          this.$refs.ImageUpload.uploadImages(this.images).then(res => {
            console.log(res)
            this.$toast('支付凭证上传成功')
            this.$router.push({name: 'transfer-transaction'})
          }).catch(err => {
            console.log(err)
            this.$toast('支付凭证上传失败，可能是因为图片过大')
            this.$router.push({name: 'transfer-transaction'})
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style>
  .image_upload{  height: 60px; width: 100%;background: red}
</style>
